@import (reference) "./../../../shared/common";
@import (reference) "./../../../shared/color";
.dynamic-content-container {
  overflow-y: hidden;
  &, * {
    user-select: none;
    cursor: default;
  }
  &.dynamic-head-container {
    .flex(0, 0);
    td,
    th {
      text-align: left;
    }
  }
  &.dynamic-body-container {
    .flex;
    overflow-x: auto;
    td,
    th {
      text-align: right;
    }
  }
  table {
    min-width: 100%;
    border-collapse: collapse;
    td,
    th {
      border: @border-simple;
      height: 28px;
      background-color: @color-white;
      font-size: 1.4rem;
      padding: 0 10px;
      white-space: nowrap;
    }
  }
  td.go-up {
    color: @color-red-red;
  }
  td.go-down {
    color: @color-green-gray;
  }
  tr.active {
    td {
      background-color: @color-gray-view-background;
    }
  }
  tr.hover {
    td {
      background-color: @color-gray-view-background;
    }
  }
  th {
    &.sort-asc,
    &.sort-desc {
      &,
      &::after {
        font-family: FontAwesome !important;
      }
    }
    &.sort-asc::after {
      content: "\f0de";
    }
    &.sort-desc::after {
      content: "\f0dd";
    }
  }
}

.empty-row {
  td, th {
    background-color: #FBFBF0;
    color: @color-gray-dark;
  }
}

 :host {
  width: 100%;
  .display-flex(row);
}